import React, { Component } from 'react';
import { Link, history } from 'umi';
import style from './index.less';
import { Provider } from 'mobx-react';
import store from '../../store/index';
export default class index extends Component {
  gocity() {
    history.push('/city');
  }
  detail() {
    history.push('/detail');
  }
  state = {
    routelist: [
      {
        name: '一手新房',
        to: '/home/onehouse',
      },
      {
        name: '二手房',
        to: '/home/twohouse',
      },
      {
        name: 'EN',
        to: '/home/en',
      },
    ],
    footerTabs: [
      { name: '热门区域' },
      { name: '地铁周边' },
      { name: '热门城市' },
      { name: '最新房源' },
    ],
    footerList: [
      '东花市租房',
      '广渠门租房',
      '车公庄租房',
      '马甸(海淀区)租房',
      '新街口租房',
      '宣武门租房',
      '月坛租房',
      '健翔桥租房',
      '天通苑租房',
    ],
  };
  render() {
    const { routelist, footerTabs, footerList } = this.state;
    return (
      <Provider {...store}>
        <div className={style.header_div}>
          <header className={style.header}>
            <div
              onClick={() => {
                this.gocity();
              }}
              className="header_city"
            >
              {' '}
              北京
            </div>
            {routelist &&
              routelist.map((item, index) => {
                return (
                  <Link className={style.link} key={index} to={item.to}>
                    {item.name}
                  </Link>
                );
              })}
            <div className={style.header_null}> </div>
          </header>
          <div className="header_box">{this.props.children}</div>
          <footer>
            <div className={style.footer}>
              <div className={style.keywords_wrapper}>
                <div className={style.keywords_select_tab}>
                  {footerTabs.map((item, index) => {
                    return (
                      <div className={style.tabs_item} key={index}>
                        {item.name}
                      </div>
                    );
                  })}
                </div>
                <div className={style.keywords_links}>
                  {footerList.map((item, index) => {
                    return (
                      <div className={style.keywords_links_col} key={index}>
                        {item}
                      </div>
                    );
                  })}
                </div>
              </div>
              <div className={style.legal_info_wrapper}>
                <div className={style.legal_info_wrapper_left}>
                  <img
                    src="https://webimg.ziroom.com/2255fb45-50ca-40de-ad6b-fd7062c35859.png"
                    alt=""
                  />
                  <p>营业执照</p>
                </div>
                <div className={style.legal_info_wrapper_right}>
                  <p>天津创享信息科技有限公司</p>
                  <p>Copyright2019 ziroom.com 版权所有</p>
                  <p>
                    <img
                      src="https://webimg.ziroom.com/e889d38d-829d-4cae-b58b-6ceee615b8ea.png"
                      alt=""
                    />
                    京公网安备 11010502035891号
                  </p>
                  <p>津ICP备19002079号-2</p>
                </div>
              </div>
            </div>
          </footer>
        </div>
      </Provider>
    );
  }
}
